<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width:800px;
            height: 500px;
            border:1px solid red;
        }
        li{
            width:100px;
            height: 100px;
            border:1px solid blue;
            list-style: none;
        }
    </style>
    <script>
        // 事件代理(事件委托):用到的元素是事件冒泡，把事件处理添加到父元素，等待子元素事件冒泡，并且父元素可以通过target判断是哪个子元素，从而做出相应的处理

       
        // 优点：
        //     1.减少事件注册，降低内存占用
        //     2.新增元素时实现动态绑定事件
        window.onload=function(){
            //方式一：
            // var lis=document.querySelectorAll("ul>li");//集合   4
            // for(var i=0;i<lis.length;i++){
            //     lis[i].onclick=function(){
            //         console.log(this.innerHTML);
            //     };
            // }

            // 方式二：
            var ul=document.querySelector("ul");//获取li的父元素的DOM对象
            ul.onclick=function(e){//事件对象

                console.log(e.target);//事件的目标元素
                // if(e.target.nodeName=="LI"){//根据节点名称作一个判断
                //     console.log(e.target.innerHTML);
                // }


            };


        };


        function doAdd(){
            var li=document.createElement("li");//创建li元素
            li.innerHTML="我是新创建的li";//添加文本内容
            var ul=document.querySelector("ul");//获取li的父元素
            ul.appendChild(li);//将子元素添加到父元素
            // li.onclick=function(){
            //     console.log('1');
            // }
        }

    </script>
</head>
<body>
    <ul>
        <li>red</li>
        <li>green</li>
        <li>yellow</li>
        <li>pink</li>
        <span>span</span>
        <p>p</p>
    </ul>
    <input type="button" value="按钮" onclick="doAdd()">
</body>
</html>